//1.通过tools里面封装的函数 获取地址栏的数据信息
const valObj = myGetUrlValObj();
console.log(valObj.id); //获取后用于传参携带数据 获取后端数据库数据 动态生成页面
//2.发送请求 获取响应体数据
let str = "";
const xhr = myPromiseJQueryAjax(
  "../server/goods_detail.php",
  "post",
  {
    goods_id: valObj.id,
  },
  "json"
);
xhr.then(function (res) {
  console.log(res);
  str = `<div class="detailBox">
        <div class="detailLeft">
            <div class="logoImg">
                <img class="media-object" src="${res.goods_big_logo}" alt="...">
                <div class="mask"></div>
            </div>
            <div class="glass" style="background-image:url(${res.goods_big_logo})"  ;></div>
        </div>
        <div class="detailRight">
          <div class="infoTxt">
            ${res.goods_name}
          </div>
          <div class="price"><span>商品单价：</span> ￥${res.goods_price} 元</div>

          <div class="number">
            <button name="减" class="jain">-</button>
            <input class="num" type="text" value="1" />
            <button name="加" class="jia">+</button>
          </div>
          <p>
            <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
            <a href="javascript:;" name="cart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
        </p>
        </div>
      </div>
      <div class="moreInfo">
        <ul>
          <li>店长推荐</li>
          <li>商品详情</li>
          <li>规格与包装</li>
          <li>更多评价</li>
        </ul>
        <div>
             ${res.goods_introduce}</div>
      </div>`;
  //将动态生成的页面 写入到div容器中
  $(".container").html(str);

  //3.给+ -按钮添加点击事件
  //页面内容是动态生成的 给父级标签添加点击事件
  //通过事件委托 来完成效果
  $(".container").click(function (e) {
    //判断点击的是减
    if (e.target.getAttribute("name") === "减") {
      //获取input中的数值 减1 之后赋值回来
      $(".num").val($(".num").val() - 1 < 1 ? 1 : $(".num").val() - 1);
    } else if (e.target.getAttribute("name") === "加") {
      //判断 大于等于库存 就等于库存
      $(".num").val(
        $(".num").val() - 0 + 1 > res.goods_number
          ? res.goods_number
          : $(".num").val() - 0 + 1
      );
    }
    //4.点击添加购物车
    else if (e.target.getAttribute("name") === "cart") {
      //判断用户是否是登录状态
      //如果没有登录 跳转页面 去 执行登录操作
      //获取cookie数据对象
      const cookieObj = myGetCookie();
      console.log(cookieObj); //login:1 是登录状态

      //没有登录的情况
      if (cookieObj.login !== "1") {
        //弹出提示框 点击确定 跳转登录页面
        if (window.confirm("您还未登录，点击确定跳转登录页面")) {
          window.location.href = `./login2.html?url=${window.location.href}`;
        }
        return;
      }
      //已经登录的情况
      //定义一个cart变量 存储 localStorage的cart属性的值
      let cart = localStorage.cart;
      // console.log(cart);

      if (cart === undefined) {
        //没有创建购物车信息
        //直接添加当前商品信息
        //判断购买数量 符合 数值范围

        if (
          !($(".num").val() - 0 >= 1 && $(".num").val() - 0 <= res.goods_number)
        ) {
          alert("您输入的数值不符合库存范围");
          return;
        }

        //符合数量范围 给res添加购买数量属性值
        res.num = $(".num").val() - 0;
        //购买状态
        res.buy = true;

        //将商品信息转化为json字符串存储
        localStorage.cart = JSON.stringify([res]);
        //购物车数据信息已经存在
      } else {
        cart = JSON.parse(cart);
        //如果购车 是一个空数组
        if (cart.length === 0) {
          //直接添加商品信息
          if (
            !(
              $(".num").val() - 0 >= 1 &&
              $(".num").val() - 0 <= res.goods_number
            )
          ) {
            alert("您输入的数值不符合库存范围");
            return;
          }
          //符合数量范围 给res添加购买数量属性值
          res.num = $(".num").val() - 0;
          //购买状态
          res.buy = true;
          localStorage.cart = JSON.stringify([res]);
        } else {
          //当前购物车不是空车
          //购物车里没有该商品 添加商品
          //购物车里面有该商品 添加数量
          //定义一个变量bool 判断当前要加入购物车的商品id在cart里面是否存在
          let bool = cart.some(function (val) {
            return val.goods_id === res.goods_id;
          });
          //如果存在
          if (bool) {
            //给对应的商品添加购买数量
            //循环遍历cart 找到 goods_id相同的商品
            //添加商品个数
            for (let i = 0; i < cart.length; i++) {
              if (cart[i].goods_id == res.goods_id) {
                let numAdd = cart[i].num - 0 + ($(".num").val() - 0);
                //判断添加新的数量之后 购买数量在正确的范围之内
                if (!(numAdd >= 1 && numAdd <= cart[i].goods_number)) {
                  alert("你输入的商品有误");
                  return;
                }
                //将numAdd赋值给购买的商品数量值
                cart[i].num = numAdd;
                //将新的购物车数据再次设定给localStorage中的数据
                localStorage.cart = JSON.stringify(cart);
              }
            }
          } else {
            // 购物车里没有该商品
            // 补充当前商品的购买数量和购买状态
            //将新的对象写入到数组起始位置
            //判断数量符合规范
            console.log($(".num").val());
            if (
              !(
                $(".num").val() - 0 >= 1 &&
                $(".num").val() - 0 <= res.goods_number
              )
            ) {
              alert("输入商品数量有误");
              return;
            }
            //数量符合规范
            res.num = $(".num").val() - 0;
            res.buy = true;
            cart.unshift(res);
            localStorage.cart = JSON.stringify(cart);
          }
        }
      }
      window.location.href = "./cart2.html";
    }
  });
  //鼠标移动事件，放大镜显示
  //获取标签对象
  const oBox = document.querySelector(".detailLeft");
  const oShow = document.querySelector(".logoImg");
  const oMask = document.querySelector(".mask");
  const oImg = document.querySelector(".logoImg img");
  const oGlass = document.querySelector(".glass");
  //定位值
  const showLeft = oBox.offsetLeft;
  const showTop = oBox.offsetTop;
  //边框
  const showBorLeft = oShow.clientLeft;
  const showBorTop = oShow.clientTop;
  //mask的宽高,由于mask是隐藏的，需要通过样式获取他的宽高
  const oMaskWidth = parseInt(window.getComputedStyle(oMask).width);
  const oMaskHeight = parseInt(window.getComputedStyle(oMask).height);
  //show 内容+padding
  const showWidth = oShow.clientWidth;
  const showHeight = oShow.clientHeight;
  //绑定事件
  setMoveLeave();
  function setMoveLeave() {
    oShow.addEventListener("mousemove", function () {
      oMask.style.display = "block";
      oGlass.style.display = "block";
    });
    oShow.addEventListener("mouseleave", function () {
      oMask.style.display = "none";
      oGlass.style.display = "none";
    });
  }
  //鼠标移动，放大镜跟随鼠标
  setMouseMove();
  function setMouseMove() {
    oShow.addEventListener("mousemove", function (e) {
      //获取鼠标x y 的值
      let x = e.pageX - showLeft - showBorLeft - oMaskWidth / 2;
      let y = e.pageY - showTop - showBorTop - oMaskHeight / 2;
      //判断极值
      x = x < 0 ? 0 : x;
      y = y < 0 ? 0 : y;
      x = x > showWidth - oMaskWidth ? showWidth - oMaskWidth : x;
      y = y > showHeight - oMaskHeight ? showHeight - oMaskHeight : y;
      //将x y 值写入mask的定位值
      oMask.style.left = x + "px";
      oMask.style.top = y + "px";
      oGlass.style.backgroundPosition = `-${3 * x}px -${3 * y}px`;
    });
  }
});
